<!-- 组件说明 -->
<template>
  <div class="exchange" style="width: 100%;min-height: 100vh;">
    <goback :title="'EXCHANGE'" :ifTransparent="false"></goback>
    <div class="topwrap">
      <div class="title">
        <div class="li">
          <img :src="huangguan" alt=""/>
          <span>{{ pageData.integralOne ? pageData.integralOne : 0 }}</span>
        </div>
        <div class="li">
          <img :src="jiaoya" alt=""/>
          <span>{{
              pageData.userWaltInfo.useGainWaltCount
                  ? pageData.userWaltInfo.useGainWaltCount
                  : 0
            }}</span>
        </div>
        <div class="li" @click="goto('excRuler')">
          <img :src="pros"/>
        </div>
      </div>

      <div class="title">
        <div class="li">
          <img :src="uppic" alt=""/>
          <span>{{
              pageData.gainWeight
                  ? Number(pageData.gainWeight * 100).toFixed(3) + "%"
                  : Number(0).toFixed(3) + "%"
            }}</span>
        </div>
        <div class="li">
          <img :src="uppic2" alt=""/>
          <span>{{
              pageData.likeWeightCount
                  ? Number(pageData.likeWeightCount * 100).toFixed(3) + "%"
                  : Number(0).toFixed(3) + "%"
            }}</span>
        </div>
        <div class="li">
          <img :src="allup" alt=""/>
          <span>{{ allupData }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="li"></div>
      <div class="li"></div>
      <div class="li big">
        <div class="li">
          <img :src="jiaoya" alt=""/>
          <span>{{
              pageData.isExchanged > 0
                  ? 0
                  : Number(pageData.userWaltInfo.useGainWaltCount) +
                  Number(pageData.userWaltInfo.useWaltCount) -
                  Number(pageData.feesWalt) >
                  0
                      ? Number(pageData.userWaltInfo.useGainWaltCount) +
                      Number(pageData.userWaltInfo.useWaltCount) -
                      Number(pageData.feesWalt)
                      : 0
            }}</span>
        </div>
        <p> = </p>
        <div class="li yellowbg">
          <img :src="huangguan" alt=""/>
          <span>{{
              pageData.isExchanged > 0
                  ? 0
                  : pageData.integral
                      ? pageData.integral
                      : 0
            }}</span>
        </div>
      </div>
      <div class="li last" v-if="false">
        <span>Fees:</span>
        <div class="li li-item">
          <img :src="jiaoya" alt=""/>
          <!--          <span>{{ pageData.feesWalt }}</span>-->
        </div>
      </div>

<!--      <div-->
<!--          :class="-->
<!--          pageData.isExchanged > 0 || pageData.enbaleBaseWalt == 0 ||pageData.integral==0-->
<!--            ? 'btn disabled'-->
<!--            : 'btn'-->
<!--        "-->
      <div class='btn'
          @click="
          confirmFn(pageData.isExchanged == 0 && pageData.enbaleBaseWalt > 0&&pageData.integral>0)
        "
      >
        CONFIRM
      </div>
    </div>
    <div class="bottom">
      <div class="imgwrap" @click="goto('store')">
        <img :src="store2" alt=""/>
        <p>Store</p>
      </div>
    </div>

    <!--        交换说明-->
    <van-popup v-model="exc_sm">
      <div class="exc_smWrap">
        <p>
          EXCHANGE<br/>
          DESCRIPTION
        </p>
        <span
        >1................</span
        >
        <span
        >2.1................</span
        >
        <span
        >3.1................</span
        >
        <div class="btn" @click="exc_sm = false">CONFIRM</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {remNumber} from "../../../utils/remset";
import { Dialog } from "vant";

export default {
  name: "exc",
  data() {
    return {
      img: require("@/assets/imgs/index/defaultPic.png"),
      huangguan: require("@/assets/imgNews/index/righttop-left.png"),
      jiaoya: require("@/assets/imgNews/index/righttop-center.png"),
      uppic: require("@/assets/imgNews/index/startup.png"),
      uppic2: require("@/assets/imgNews/video/top2.png"),
      pros: require("@/assets/imgNews/index/pros1.png"),
      store2: require("@/assets/imgNews/index/store2.png"),
      allup: require("@/assets/imgNews/index/allup.png"),

      exc_sm: false, //默认不展示
      pageData: {
        userWaltInfo: {}
      }
    };
  },
  computed: mapState({
    userStoreData: state => state.user,

    allupData() {
      let allupDataNew =
          Number(this.pageData.gainWeight) +
          Number(this.pageData.likeWeightCount) +
          Number(this.pageData.baseWeight) +
          Number(this.pageData.todayVideoWeight) +
          Number(this.pageData.leaderboardWeight);
      if (allupDataNew) {
        return Number(allupDataNew * 100).toFixed(3) + "%";
      } else {
        return Number(0).toFixed(3) + "%";
      }
    },
    objSize() {
      return remNumber(720) * 3.3;
    }
  }),
  methods: {
    confirmFn(isExchanged) {
      let zs = this;
      console.log(isExchanged);
      if (!isExchanged) {
        // zs.$toast("Your current steps are redeemed for 0 points. Please continue to get more steps before redeeming points");
        zs.$toast({
          message: "Your current steps are redeemed for 0 points. Please continue to get more steps before redeeming points",
          duration:4000,
        })
        return;
      }
      Dialog.confirm({
        title: "Tips",
        message: "You can only change it once a day. Are you sure you want to change it? If yes, click Yes. If not, click No.",
        confirmButtonText:'Yes',
        cancelButtonText:'No'
      })
          .then(() => {
            zs.getPageData(2);
          })
          .catch(() => {
            // on cancel
          });
    },
    getPageData(isPreview) {
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      zs.api.userController
          .userWalkexchange({
            isPreview,
            userId: zs.userStoreData.userId
          })
          .then(res => {
            zs.$toast.clear();
            console.log(res);
            if (res.data.code === 200) {
              if (isPreview == 1) {
                this.pageData = res.data.data;
              } else {
                zs.$toast({
                  // message: res.data.info,
                  message: 'Success',
                  duration: 1800
                });
                setTimeout(() => {
                  this.$router.replace({name: "index"});
                }, 2000);
              }
            } else {
              zs.$toast({
                message: "Try again latter",
                duration: 1800,
                forbidClick: true
              });
              setTimeout(() => {
                this.$router.replace({name: "index"});
              }, 2000);
            }
          });
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    pageinit() {
      this.getPageData(1);
    }
  },
  mounted() {
    this.pageinit();
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");

.exchange {
  color: rgba(51, 51, 51, 1);
  //background: linear-gradient(180deg, #00b1ff 0%, #0089ff 100%);
  background: #fff;
  padding: 0;
  box-sizing: border-box;

  .topwrap {
    padding: 1.42rem 0 0.1rem;

    .title {
      background-color: rgba(221, 245, 255, 1);
      display: flex;
      justify-content: space-between;
      //padding: 0.1rem 0.3rem;
      padding: 0.1rem 0.45rem;
      height: 0.7rem;

      .li {
        display: flex;

        img {
          width: 0.4rem;
          height: 0.4rem;
          padding: 0.1rem;
        }

        span {
          display: block;
          line-height: 0.6rem;
          height: 0.6rem;
          font-size: 0.28rem;

          font-weight: bold;
          color: #000000;
          opacity: 1;
        }
      }
    }
  }

  .content {
    padding: 0rem 0.5rem 1.4rem;

    .li {
      display: flex;

      span p {
        height: 0.33rem;
        line-height: 0.33rem;
        font-size: 0.24rem;
        font-weight: bold;
        color: #999;
      }

      p {
        font-weight: bolder;
        color: #333;
      }

      &.big {
        padding: 1rem 0.3rem 0.22rem;
        display: flex;
        justify-content: space-between;

        & > p {
          color: rgba(51, 51, 51, 1);
          font-size: 0.4rem;
          height: 2.4rem;
          line-height: 2.4rem;
        }

        & > .li {
          display: block;
          background: linear-gradient(180deg, #d8fff7 0%, #eafffc 100%);
          padding: 0.3rem 0.5rem 0.2rem;

          &.yellowbg {
            background: linear-gradient(180deg, #fff8d8 0%, #fffeea 100%);
          }

          img {
            width: 1.3rem;
            height: 1.3rem;
            margin-bottom: 0.2rem;
          }

          span {
            display: block;
            height: 0.4rem;
            font-size: 0.28rem;
            font-weight: bold;
            line-height: 0.4rem;
            color: #333333;
            opacity: 1;
            text-align: center;
          }
        }
      }

      &.last {
        span {
          height: 0.3rem;
          line-height: 0.3rem;
        }

        .li.li-item {
          padding-left: 0.1rem;

          img {
            width: 0.3rem;
            height: 0.3rem;
            padding-right: 0.1rem;
          }
        }
      }
    }

    .btn {
      margin: 1rem auto 0;
      line-height: 1rem;
      height: 1rem;
      border-radius: 0.5rem;
      background: linear-gradient(270deg,
      rgba(254, 237, 85, 1) 0%,
      rgba(255, 196, 0, 1) 100%);
      font-size: 0.4rem;

      font-weight: bolder;
      color: #663929;
      opacity: 1;
      text-align: center;
      cursor: pointer;

      &.disabled {
        background: linear-gradient(270deg,
        rgba(254, 237, 85, 0.2) 0%,
        rgba(255, 196, 0, 0.3) 100%);
        color: rgba(102, 57, 41, 0.3);
      }
    }
  }

  .bottom {
    border-top: 0.2rem solid rgba(245, 245, 245, 1);
    padding: 0.3rem 0.44rem 0;
    height: calc(100vh - 9rem);
    box-sizing: content-box;
    min-height: 1.8rem;

    .imgwrap {
      float: left;

      img {
        width: 1rem;
        width: 1rem;
        margin: 0 0 0.1rem;
      }

      p {
        font-size: 0.2rem;

        font-weight: bolder;
        line-height: 0.28rem;
        color: #333333;
        opacity: 1;
        text-align: center;
      }
    }
  }

  .van-popup {
    border-radius: 0.2rem;
    overflow: hidden;
  }

  .exc_smWrap {
    width: 6rem;
    height: 8rem;
    padding: 0.4rem 0.4rem 0.2rem;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;

    & > p {
      font-size: 0.4rem;

      font-weight: bolder;
      line-height: 0.56rem;
      color: #333333;
      opacity: 1;
      margin-bottom: 0.4rem;
      position: relative;

      &::after {
        content: "";
        width: 1rem;
        height: 0.1rem;
        background-color: rgba(255, 163, 0, 1);
        position: absolute;
        left: 0;
        bottom: -0.2rem;
      }
    }

    span {
      display: block;
      width: 5.2rem;
      font-size: 0.24rem;

      font-weight: bold;
      line-height: 0.33rem;
      color: #333333;
      opacity: 1;
      overflow-wrap: anywhere;
      margin: 0.2rem auto;

      &:last-child {
        padding-bottom: 1.2rem;
      }
    }

    .btn {
      width: 5rem;
      height: 0.8rem;
      line-height: 0.8rem;
      background: linear-gradient(270deg, #feed55 0%, #ffc400 100%);
      font-size: 0.4rem;
      text-align: center;
      border-radius: 1rem;

      font-weight: bold;
      color: #663929;
      opacity: 1;
      position: absolute;
      left: 50%;
      bottom: 0.2rem;
      transform: translateX(-50%);
      cursor: pointer;
    }
  }
}
</style>
